import { FC, useEffect, useState } from "react";
import { categoryList } from "@/mocks/home/category";
import type { Category } from "@/types/category";
import Content from "@/pages/home/content";

export default function Home() {
  const [category, setCategory] = useState<Array<Category>>([]);
  const [curCateUrl, setCurCateUrl] = useState<string>("recommended");
  useEffect(() => {
    const following: Category = { category_name: "关注", category_url: "following" };
    const recommended: Category = { category_name: "综合", category_url: "recommended" };
    const newCategoryList: Category[] = [following, recommended, ...categoryList];
    setCategory(newCategoryList);
  }, [categoryList]);
  const handleCurCateUrl = (item: Category) => {
    setCurCateUrl(item.category_url);
  };
  return (
    <div>
      <div className=' w-300 flex m-auto my-5 text-sm'>
        <CategoryList
          category={category}
          curCateUrl={curCateUrl}
          handleCurCateUrl={item => {
            handleCurCateUrl(item);
          }}
        />
        <Content category_url={curCateUrl} />
        <div className=' w-60 bg-white'>广告区</div>
      </div>
    </div>
  );
}

interface paramsProps {
  category: Category[];
  curCateUrl: string;
  handleCurCateUrl: (param: Category) => void;
}

const CategoryList: FC<paramsProps> = (props: paramsProps) => {
  return (
    <div className=' top-20 w-46 max-h-screen_140 min-h-180 scrollbar sticky py-2 overflow-y-auto bg-white rounded-md resize-y'>
      {props.category.map(item => {
        return (
          <div
            key={item.category_url}
            className={
              (item.category_url === props.curCateUrl ? "bg-blue-50 text-blue-400" : "") +
              " px-4 py-3 hover:text-blue-400 hover:bg-blue-50 mx-2 rounded-md text-base"
            }
            onClick={() => {
              props.handleCurCateUrl(item);
            }}
          >
            {item.category_name}
          </div>
        );
      })}
    </div>
  );
};
